﻿<!-- 
@实时交互页面 interact.html
@功能：实时位置追踪，实时状态展示，语音，视频，图片，文字实时交互
@吕康宁
@2020.8.18   
 -->

<style> 
/*#efence_list{ position:absolute; left:0px; top:0px; background:#FFFFFF; width:400px;height:98% }*/
.amap-logo{
  opacity:0;
}
.amap-copyright{
  opacity:0;
}
</style> 
 <!-- 引入语音处理js模块start -->
<script src="/static/amrPlayer-jsdemo/voice-2.0.js"></script>
<script src="/static/amrPlayer-jsdemo/BenzAMRRecorder.js"></script>
 <!-- 引入语音处理js模块end -->

<div id="allmap" class ="gd-maps" style="width: 100%;height: 100%"></div>

<!-- <div id="efence_list" style="margin: 0;padding: 5px;">
  <form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item">
      <div class="layui-inline" >
        <div class="layui-input-inline" style="width: 300px">
          <select name="chose_device" id="chose_device" xm-select="select" xm-select-type="1"  xm-select-search="" xm-select-height="36px" >
          </select>
        </div>
      </div>
      <div class="layui-inline">
          <a class="layui-btn" lay-submit="" lay-filter="data-search-btn">添加</a>
      </div>
    </div>
  </form>
</div> -->

<script type="text/javascript">
var efence_list=  '<form class="layui-form layui-form-pane" action="" style="padding:5px;">'+
                    '<div class="layui-form-item">'+
                      '<div class="layui-inline" >'+
                        '<div class="layui-input-inline" style="width: 300px">'+
                          '<select name="chose_device" id="chose_device" xm-select="select" xm-select-type="1"  xm-select-search="" xm-select-height="36px" >'+
                          '</select>'+
                        '</div>'+
                      '</div>'+
                      '<div class="layui-inline">'+
                          '<a class="layui-btn layui-btn-sm" lay-submit="" lay-filter="data-search-btn">添加</a>'+
                      '</div>'+
                    '</div>'+
                  '</form>';

$('#side2').empty()
$('#side1').attr('class','empty')
$('.empty').hide()
$('#side2').attr('class','layui-side')
$('#side2').attr('style','width:400px')
$('#side2').append(efence_list)
$('#side2').show()

// -------高德地图初始化start--------//

function onApiLoaded(){
  var map = new AMap.Map('allmap', {
      center: [114.000923, 22.675807],
      rotateEnable:true,
      pitchEnable:true,
      zoom: 17,
      pitch: 50,
      rotation: -15,
      viewMode:'3D', //开启3D视图,默认为关闭
      zooms:[2,20],
  });
  map.plugin(["AMap.ToolBar",'AMap.ControlBar'], function() {
      map.addControl(new AMap.ToolBar( 
            {position:{
              right:'40px',
              top:'110px'
            }
        }));
      map.addControl(new AMap.ControlBar({
        position:{
          right:'10px',
          top:'10px'
        }
      }));
  });
}
var url = 'https://webapi.amap.com/maps?v=2.0&key=a66c5cf868a7a3c621e4bcb4aba57a4d&callback=onApiLoaded';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);

// -------高德地图初始化end--------//



//------添加选择设备列表start------//
$(function(){ 
  $('#chose_device').empty()
  for (var i = device.length - 1; i >= 0; i--) {
    var user_name=device[i]['user_name'];
    if(device[i]['user_detail']!='0'){
      user_name=device[i].user_detail.name
    }
    var option='<option value="'+device[i]['device_id']+'">'+user_name+'</option>'
  $('#chose_device').append(option)
  }
  formSelects.render()
});  
//------添加选择设备列表end------//

//----添加设备实时信息到侧边栏start----//

form.on('submit(data-search-btn)', function (data) {
  var search_dev = formSelects.value('select', 'val')
  console.log(search_dev)
  var test=get_detail_from_id(device,'9613051350')
  add_dev_detail(test)

});

var add_dev_detail=function(gps){
  // console.log(gps)
  var bds_num=gps.dynamic.bds_num,param1,param2,param3,param4,blood_pres,gps_num=gps.dynamic.gps_num,rssi=gps.dynamic.rssi;
    var dev_kind='0'
    if(gps.dynamic.receive_port!='0'){
      dev_kind=gps.dynamic.receive_port[1]
    }
    var dev_loca=''
    // console.log(dev_loca)
    if(dev_loca=='' && gps.dynamic.track_type!=='0'){
      wifi_lbs={'wifi':gps.dynamic.wifi,'lbs':gps.dynamic.lbs}
      dev_loca='<button class="layui-btn layui-btn-xs" onclick="get_wifi_lbs_addr('+gps.device_id+',\''+gps.dynamic.track_type+'\')">点击解析'+gps.dynamic.track_type+'地址</button>'
    }

    // var status_list=['acc_off', 'ante_ok', 'undefence', 'normal','online','sleep']
    status_dict={'undefence':'未设防', 'normal':'正常','online':'在线','sleep':'休眠','sos_alarm':'SOS报警'}
    if(bds_num==null){
      bds_num='0'
    }
    if(gps_num==null){
      gps_num='0'
    }
    // var stop_time=(eval('('+gps.stop_time+')')['stop_time']/60).toFixed(0)
    var stop_time='0'
    var g_status;
    var status=''
    if(gps.on_off_line=='online'){
      g_status='1'
    }else{
      g_status='0'
    }
    // 状态信息
    for(var i=0;i<gps.status.length;i++){
      if(gps.status[i] in status_dict){
        status+=status_dict[gps.status[i]]+','
      }else{
        status+=gps.status[i]+','
      }
    }
    
    blood_pres=''
    if(gps.dynamic.blood_pres!='0'){
      blood_pres=eval('('+gps.dynamic.blood_pres+')')
      blood_pres='高：'+blood_pres['h_pres']+','+'低：'+blood_pres['l_pres']
    }
    heart_rate=''
    if(gps.dynamic.heart_rate!='0'){
      heart_rate=gps.dynamic.heart_rate
    }

    // 绑定的用户信息
    var user_detail=gps.user_detail;
    // if(user_detail!='0' | user_detail!=0){
    //   user_detail=gps.user_detail.current
    // }
    var dev_user_name=gps.user_name;
    var user_sex='',user_department='',user_character='',user_age='',user_picture='';
    if(user_detail!='0' | user_detail!=0){
      user_sex=user_detail.sex
      var person_detail=eval('('+user_detail.person_detail+')')
      user_department=person_detail.department
      user_character=person_detail.character
      user_age=person_detail.person_age
      user_picture=person_detail.picture
      dev_user_name=user_detail.name
    }
    if(user_picture==='' | user_picture==null){
      user_picture='/static/img/person_default.png'
    }
    var param1='性别：'+user_sex
    var param2='，年龄：'+user_age
    var param3='，部门：'+user_department
    var param4='，职位：'+user_character

        //信息窗口参数
      var opts = {
        width : 470,     // 信息窗口宽度
        height: 450,     // 信息窗口高度
        };
      var info_window;
      info_window=
            '<div class="layui-row" style="padding: 5px; background-color: #F2F2F2;">'+
              '<div class="layui-col-md8">'+
              '<div class="layui-card">'+
                '<div class="layui-card-body">'+
                  "<table class='layui-table' lay-size='sm' lay-skin='nob' style='font-size:13px;'>"+
                    "<tr bgcolor='#84C1FF'>"+
                    "<td bgcolor='#009688'><font color='white'>"+"名称: "+dev_user_name+"  ，设备ID:"+gps.device_id+"</font></td>"+
                    "</tr>"+
                    "<tr>"+
                    "<td colspan=4>"+param1+param2+param3+"</td>"+
                    "</tr>"+
                    "<tr>"+
                    "<td >"+"<i class='fa fa-heartbeat' aria-hidden='true' style='color: red;'></i>:"+heart_rate+"次/min "+" ，<i class='fa fa-stethoscope' aria-hidden='true' style='color: blue;'></i>："+blood_pres+"</td>"+
                    "</tr>"+
                    "<tr>"+
                    "<td >"+"<i class='fa fa-blind' aria-hidden='true' style='color:#5FB878'></i>："+gps.dynamic.step_count+" ，<i class='fa fa-thermometer-empty' aria-hidden='true' style='color:#FFB800'></i>：25°</td>"+
                    "</tr>"+
                    "<tr>"+
                    "<td colspan=2>"+" <i class='layui-icon layui-icon-console' aria-hidden='true' style='color:#1E9FFF'></i>："+gps.serv_receive+" ，<i class='fa fa-map-marker' aria-hidden='true' style='color:#5FB878'></i>："+gps.dynamic.track_type+"</td>"+
                    "</tr>"+
                    // "<tr>"+
                    // "<td colspan=2>"+" <i class='fa fa-map' aria-hidden='true' style='color:#009688'></i>："+"</td>"+
                    // "</tr>"+
                    "</table>"+ 
                  '</div>'+
                '</div>'+
              '</div>'+
              '<div class="layui-col-md4">'+
                '<div class="layui-card">'+
                  '<div class="layui-card-body">'+
                    '<img src="/static/img/person_default.png" style="width: 100px;height: 160px" id="p_picture">'+
                  '</div>'+
                '</div>'+
              '</div>'+
              '<div class="layui-row" style="background-color: #F2F2F2;">'+
                '<div class="layui-col-md12" >'+
                  '<div class="layui-card">'+
                    '<div class="layui-card-body">'+
                      '<button type="button" class="layui-btn layui-btn-sm">'+
                        '<i class="layui-icon ">&#xe642;</i>'+
                        "文字"+
                      '</button>'+
                      '<button type="button" class="layui-btn layui-btn-sm">'+
                        '<i class="layui-icon ">&#xe65d;</i>'+
                        "图片"+
                      '</button>'+
                      '<button type="button" class="layui-btn layui-btn-sm">'+
                        '<i class="layui-icon">&#xe645;</i>'+
                        "语音"+
                      '</button>'+
                      '<button type="button" class="layui-btn layui-btn-sm">'+
                        '<i class="layui-icon">&#xe6ed;</i>'+
                        "视频"+
                      '</button>'+
                      '<button type="button" class="layui-btn layui-btn-sm">'+
                        '<i class="layui-icon">&#xe602;</i>'+
                        "其他"+
                      '</button>'+
                    '</div>'+
                  '</div>'+
                '</div>'+
              '</div>'+
            '</div>'
    ;

    $('#side2').append(info_window)
};

//----添加设备实时信息到侧边栏end----//

</script>